<template>
  <div class="main">
      <div class="title">
        <div style="display: flex;align-items: center;">
          <div class="img">
            <img src="../assets/title.png" alt="">
          </div>
          <h5>
            上市公司
          </h5>
        </div>
        <el-button plain @click="toList">返回上市公司单位列表</el-button>
      </div>
      <div class="content" style="padding-top:0">
        <div class="company">
          <img :src="imgUrl()" alt="" style="width: 50px;height: 50px;">
          <span>{{this.$store.state.stock.stockInfo['上市公司企业简介'].COMPANYNAME}}</span>
        </div>
        <Gsjj />
        <Gphq />
        <Zqxx />
        <Fxxg />
        <Sdgd />
        <Gbbd />
        <Qyyb />
        <Cwzb />
      </div>
      <div class="maodian" v-if="showM">
        <div class="info" ref="info" v-for="(item,index) in maodian" :key="index">
          <div class="circle-line" v-if="item.show" :style="item.name === '财务指标'?{marginTop:'0px'}:''">
            <div class="circle"></div>
            <div class="line" v-show="item.name !== '财务指标'"></div>
          </div>
          <div class="icon" v-else>
            <i class="iconfont icon-weizhi"></i>
          </div>
          <a :href="item.url" @click="tomao(item)" :style="item.show?'':{marginLeft:'10px'}">{{item.name}}</a>
        </div>
      </div>
      <div class="shouqi" v-else @click="open">
        <i class="iconfont icon-zuojiantou" style="font-size: 20px;"></i>
      </div>
  </div>
</template>

<script>
import Gsjj from '@/views/gsjj'
import Gphq from '@/views/gphq'
import Sdgd from '@/views/sdgd'
import Zqxx from '@/views/zqxx'
import Fxxg from '@/views/fxxg'
import Gbbd from '@/views/gbbd'
import Qyyb from '@/views/qyyb'
import Cwzb from '@/views/cwzb'

export default {
  data(){
    return {
      codes: { "SCC":"914300005870340659" },
      active: 0,
      maodian:[
        {name:'基本信息',url:'#jbxx',show:false},
        {name:'股票行情',url:'#gphq',show:true},
        {name:'证券信息',url:'#zqxx',show:true},
        {name:'发行相关',url:'#fxxg',show:true},
        {name:'十大股东',url:'#sdgd',show:true},
        {name:'股本变动',url:'#gbbd',show:true},
        {name:'企业研报',url:'#qyyb',show:true},
        {name:'财务指标',url:'#cwzb',show:true},
      ],
      showM:true
    }
  },
  components:{Gsjj,Gphq,Sdgd,Zqxx,Fxxg,Gbbd,Qyyb,Cwzb},
  mounted(){
    this.getStockInfo({"SCC":this.$route.params.scc})
    window.addEventListener('scroll', ()=>this.showM = false)
  },
  methods:{
    getStockInfo(codes) {
        this.$store.dispatch('getStockInfo',codes)
    },
    tomao(item){
      this.maodian.forEach(i => {
        i.show = true
      })
      item.show = false
    },
    open(){
      this.showM = true
    },
    imgUrl(){
      if(this.$route.params.img) {
        return this.$route.params.img
      } else {
        return '/apps/sas/prm/web/listedcompanies/img/位图.8abfe34a.svg'
      }
    },
    toList(){
      this.$router.push({path:'/main'})
    }
  }
}
</script>

<style scoped lang="less">

.main {
  background-color: rgb(239,242,244);
  // width: 100%;
  padding: 0 10px;
  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    .img {
      width: 36px;
      height: 36px;
      margin-right: 10px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    h5 {
      font-family: PingFangSC-Medium;
      font-size: 20px;
      color: rgba(0,0,0,0.85);
      letter-spacing: 0;
      line-height: 20px;
    }
  }
  .content {
    padding: 24px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 8px 0 rgb(1 51 100 / 4%);
    .company {
      width: 100%;
      height: 88px;
      display: flex;
      align-items: center;
      span {
        font-family: PingFangSC-Medium;
        font-size: 26px;
        color: rgba(0,0,0,0.85);
        margin-left: 20px;
      }
    }
  }
  .maodian {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    width: 111px;
    height: 230px;
    background-image: linear-gradient(180deg, #069EFF 0%, #0176FF 100%);
    box-shadow: 0 0 10px 0 rgb(56 143 255 / 50%);
    border-radius: 4px 0 0 4px;
    position: fixed;
    right: 0;
    z-index: 9999;
    top: 100px;
    .info {
      display: flex;
      height: 15px;
      align-items: center;
    }
    a {
      font-family: PingFangSC-Regular;
      font-size: 13px;
      color: #FFFFFF;
      letter-spacing: 0;
      margin-left: 15px;
    }
    .circle-line {
      margin-left: 10px;
      margin-top: 5px;
      .circle {
        width: 5px;
        height: 5px;
        opacity: 0.6;
        background: #FFFFFF;
        border-radius: 50%;
      }
      .line {
        width: 1px;
        height: 16px;
        opacity: 0.6;
        background: #FFFFFF;
        border-radius: 0.5px;
        margin: 2px;
      }
    }
    .icon {
      color: white;
      margin-left: 4px;
      margin-top: 0px;
    }
  }
  .shouqi {
    width: 28px;
    height: 100px;
    background-image: linear-gradient(180deg, #069EFF 0%, #0176FF 100%);
    box-shadow: 0 0 10px 0 rgba(56,143,255,0.50);
    border-radius: 4px 0 0 4px;
    position: fixed;
    right: 0;
    top: 100px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
}

</style>